<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>【抖音短视频】记录美好生活</title>
        <style type="text/css">
            a{
                color: white;
                margin-left: 20px;
                text-decoration: none;
            }
            .outer{
                width: 100%;
                height: 100%;
                position: absolute;
                top: 0;
                left: 0;
                background-image: url("douyin_background.jpg");
                background-repeat: no-repeat;
                background-size: cover;
            }
            .head{
                height: 100px;
                width: 100%;
                overflow: hidden;
            }
            .head-left{
                margin-left: 80px;
                margin-top: 10px;
                float: left;
                height: 55px;
                width: 200px;
                background-image: url("douyin_logo.png");
                background-repeat: no-repeat;
                background-size: 105.14px 45px;
            }
            .head-right{
                float: right;
                width:800px ;
                height: 55px;
                margin-top: 10px;
            }
            .middle{
                width: 500px;
                height: 200px;
                margin: 180px 900px;

            }
            .middle-top{
                height: 80px;
                width: 450px;
                margin-left: 50px;
                background-image: url("beautifulLife.png");
                background-repeat: no-repeat;
                background-size: cover;
            }
            .middle-bottom{
                margin-top: 50px;
                margin-left: 140px;
                height: 120px;
                width: 400px;
            }
            .AppStore{
                float: left;
                width: 142px;
                height: 51px;
                background-image: url("appstore.png");
                background-repeat: no-repeat;
                background-size: cover;
                border-radius:10px;
            }
            .Android{
                float: left;
                width: 142px;
                height: 51px;
                background-image: url("android.png");
                background-repeat: no-repeat;
                background-size: cover;
                margin-left: 10px;
                border-radius:10px;
            }
            .QR-code{
                float: left;
                width: 51px;
                height: 51px;
                background-image: url("QRcode.png");
                background-repeat: no-repeat;
                background-size: cover;
                margin-left: 10px;
                border-radius:10px;
            }
            .bottom{
                height: 120px;
                width: 100%;
                text-align: center;
                position: absolute;
                bottom: 10px;
                font-size: 14px;
                color: white;
            }
            .bottom-one{
                width: 1200px;
                height: 18px;
                margin: 3px 200px;
            }
            .bottom-two{
                width: 1200px;
                height: 18px;
                margin: 3px 200px;
            }
            .bottom-three{
                width: 1200px;
                height: 18px;
                margin: 3px 200px;
            }
            .bottom-four{
                width: 1200px;
                height: 18px;
                margin: 3px 200px;
            }

        </style>
    </head>
    <body>
        <div class="outer">
            <div class="head">
                <a href="http://www.douyin.com">
                    <div class="wrapper head-left">
                    </div>
                </a>
                <div class="head-right">
                    <a href="http://www.douyin.com">创作服务平台</a>
                    <a href="http://www.open.com">开放平台</a>
                    <a href="http://www.douyin.com">系列产品</a>
                    <a href="http://www.douyin.com">抖音直播</a>
                    <a href="http://www.douyin.com">合作入驻</a>
                    <a href="http://www.douyin.com">企业合作</a>
                    <a href="http://www.douyin.com">联系我们</a>
                    <span><img src="voice_logo.png" style="width: 22px;height: 22px;margin-left: 20px;margin-top: 10px"></span>
                </div>
            </div>
            <div class="middle">
                <div class="middle-top"></div>
                <div class="middle-bottom">
                    <a href="https://apps.apple.com/cn/app/%E6%8A%96%E9%9F%B3%E7%9F%AD%E8%A7%86%E9%A2%91/id1142110895?l=zh&ls=1">
                        <div class="AppStore" ></div>
                    </a>
                   <a href="https://www.douyin.com/">
                        <div class="Android"></div>
                    </a>

                        <div class="QR-code"></div>

                </div>
            </div>
            <div class="bottom">
                <div class="bottom-one">
                    <span>|</span>
                    <a href="https://www.douyin.com/cnl_music/music_tab/" style="margin-left: 0">音乐</a>
                    <span>|</span>
                    <a href="https://www.douyin.com/cnl_music/music_tab/"  style="margin-left: 0">用户服务协议</a>
                    <span>|</span>
                    <a href="https://www.douyin.com/cnl_music/music_tab/" style="margin-left: 0">隐私政策</a>
                    <span>|</span>
                    <a href="https://www.douyin.com/cnl_music/music_tab/" style="margin-left: 0">账户找回</a>
                    <span>|</span>
                    <a href="https://www.douyin.com/cnl_music/music_tab/" style="margin-left: 0">广告投放</a>
                    <span>|</span>
                    <a href="https://www.douyin.com/cnl_music/music_tab/" style="margin-left: 0">营业执照</a>
                    <span>|</span>
                </div>
                <div class="bottom-two">
                    <p>2020 &nbsp;©&nbsp;抖音&nbsp;&nbsp;|
                        &nbsp;京ICP备16016397号-3&nbsp;|
                        &nbsp;北京微播视界科技有限公司 |
                        &nbsp; 京B2-20170846
                    </p>
                </div>
                <div class=" bottom-three">
                    <p>
                        <a href="http://www.12377.cn/">中国互联网举报中心</a>
                        &nbsp;|&nbsp;网络文化许可证-京网文-（2016）2282-264号&nbsp;|
                        &nbsp;客户服务热线：400-992-2556&nbsp;|
                        &nbsp;违法和不良信息举报：400-140-2108&nbsp;|
                        &nbsp;举报邮箱：jubao@douyin.com
                    </p>
                </div>

                <div class="bottom-four">
                    <p>
                        <!--vertical-align:middle意思是让图片和文字水平对齐 -->
                        <img src="gongan.png" style="width: 20px;height: 20px;vertical-align:middle">
                        <a target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11010802023605" style="margin-left: 0">
                            京公网安备 11010802023605号
                        </a>
                        <span>&nbsp; | &nbsp;地址&nbsp;:&nbsp;北京市海淀区知春路51号4层408&nbsp;</span>
                    </p>
                </div>
            </div>
        </div>
    </body>
</html>